<template>
  <div class="search-result" ref="searchResult">
    <div class="searchResultTitle" v-if="!showDetail">车架号查询</div>
      <div class="search-result-content" v-if="!showDetail && hasResult && showSearchResult">
        <div class="title">匹配到{{resultCount}}个结果</div>
        <div class="pic-show" v-if="VinBaseData">
          <div class="ppDetail">{{curData.brand}}&nbsp;{{curData.series}}&nbsp;{{curData.model}}</div>
          <div class="pic-carousel">
            <el-carousel :autoplay="false" arrow="always" @change="changeData">
              <el-carousel-item v-for="item in VinBaseData.object.result.data.pics" :key="this">
                <div class="pic-carousel-box">
                  <img :src="item.imgurl">
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <p><button type="button" class="pzxq" @click="showPzxq()">配置详情</button></p>
        </div>
        
        <div class="base-pz-list">
          <ul v-if="VinBaseData">
            <li v-for="item in VinBaseData.object.result.data.decode"><span class="left">{{item[0]}}</span><span class="right">{{item[1]}}</span></li>
            <!--<li><span class="left">品牌</span><span class="right">奔驰</span></li>-->
          </ul>
        </div>

      </div>

      <div class="search-result-content" v-if="showDetail">
        <div class="title"><span class="l">配置详情</span><span class="r" @click="showPzxq()"><img src="./../../../images/ic_close.png" alt=""></span></div>

        <div class="configure-pic-carousel" v-if="VinConfigurationDetail">
            <el-carousel :autoplay="false" arrow="always">
              <el-carousel-item v-for="item in VinConfigurationDetail.object.result.pics" :key="this">
                  <img :src="item.imgurl">
              </el-carousel-item>
            </el-carousel>
          </div>

        <div class="configure-list" v-if="VinConfigurationDetail">
          <div v-for="item in VinConfigurationDetail.object.result.paramitems" class="configure-list-box">
            <div class="configure-title">{{item.itemtype}}</div>
            <ul>
              <li v-for="kItem in item.items"><span class="left">{{kItem.name}}</span><span class="right">{{kItem.modelexcessids[0].value}}</span></li>
            </ul>
          </div>
        </div>

      </div>
    </div>
</template>

<script>
  import * as VinRes from './../../../utils/getVinData.js'
  export default {
    data () {
      return {
        dispatch: this.$store.dispatch, // 用于vuex值得动态设置
        getter: this.$store.getters,
        condition: '',
        showDetail: false,
        VinBaseData: '',
        curData: '',
        hasResult: false,
        showSearchResult: false,
        VinConfigurationDetail: '',
        resultCount: 0
      }
    },
    props: {
      searchCriteria: {
        type: String,
        default: ''
      }
    },
    methods: {
      showPzxq () {
        var _self = this
        _self.showDetail = !_self.showDetail
        _self.getConfiguration()
      },
      changeData (item) {
        var _self = this
        _self.curData = _self.VinBaseData.object.result.data.pics[item]
      },
      getVinData () {
        var _self = this
        _self.showDetail = false
        let data = {
          id: 1,
          sign: 1,
          version: _self.$const.QXBAPIVERSION,
          device: 3,
          action: 'vinv3',
          timestamp: new Date().getTime(),
          H5_DEBUG: 1,
          params: {
            vin: _self.condition,
            count: 0,
            dateline: 1495765068934,
            sessionid: "nvm68mj3qvtjgn5h4qq6knta22"
          }
        }
        _self.dispatch('setVimNum', _self.condition)
        VinRes.getVinData(_self.$const.VINURL, data, _self, (res) => {
          console.log(res)
          _self.VinBaseData = res
          if (_self.VinBaseData.object && _self.VinBaseData.object.result.data.pics.length > 0) {
            var curVimBaseData = _self.getter.VimBaseData
            if (curVimBaseData) {
              _self.dispatch('setVimOldData', curVimBaseData)
            }
            _self.dispatch('setVimChangedCcw', true)
            _self.dispatch('setVimChangedCth', true)
            _self.dispatch('setVimChangedEscf', true)
            _self.dispatch('setVimBaseData', _self.VinBaseData)
            _self.insertVimToHistory(_self.condition)
            _self.hasResult = true
            _self.showSearchResult = true
            _self.VinBaseData.object.result.data.decode.splice(0, 1)
            _self.resultCount = _self.VinBaseData.object.result.data.pics.length
            _self.curData = _self.VinBaseData.object.result.data.pics[0]
          } else {
            _self.hasResult = false
            _self.showSearchResult = false
          }
        }, _self.$refs.searchResult)
      },
      getConfiguration () {
        var _self = this
        let data = {
          id: 1,
          sign: 1,
          version: _self.$const.QXBAPIVERSION,
          device: 3,
          action: 'VinV2_modelParam',
          timestamp: new Date().getTime(),
          H5_DEBUG: 1,
          params: {
            modelId: _self.curData.id,
            sessionid: "nvm68mj3qvtjgn5h4qq6knta22"
          }
        }
         VinRes.getVinData(_self.$const.VINCONFIGURATION, data, _self, (res) => {
           // console.log(res)
          _self.VinConfigurationDetail = res
        }, _self.$refs.searchResult)
      },
      searchResult (val) {
        if (val && this.condition !== val) {
          this.condition = val
          this.getVinData ()
        }
      },
      insertVimToHistory (vim) {
        var _self = this
        var vimList = _self.$localStrorage.getStore('vimHistory')
        // console.log(vim)
        if (!vimList) {
          // console.log('1')
          vimList = []
          vimList.push(vim)
        } else {
          // console.log('2')
          var haveItem = false
          var index = 0
          for (var i = 0; i < vimList.length; i ++) {
            var item = vimList[i]
            if (item === vim) {
              haveItem = true
              index = i
              break
            }
          }
          if (haveItem) {
            // console.log('3')
            var first = vimList[index]
            vimList.splice(index, 1)
            vimList.push(first)
          } else {
            // console.log('4')
            if (vimList.length > 15) {
              vimList.splice(0, 1)
            }
            vimList.push(vim)
          }
        }
        _self.$localStrorage.setStore('vimHistory', vimList)
      }
    },
    mounted () {
      var _self = this
      var localVim = _self.getter.VimNum
      // console.log(localVim)
      if (localVim) {
        _self.condition = localVim
        var vimBaseData = _self.getter.VimBaseData
        if (vimBaseData) {
          _self.VinBaseData = vimBaseData
          _self.resultCount = _self.VinBaseData.object.result.data.pics.length
          _self.curData = _self.VinBaseData.object.result.data.pics[0]
          _self.hasResult = true
          _self.showSearchResult = true
        } else {
          _self.getVinData ()
          _self.hasResult = false
          _self.showSearchResult = false
        }
      }
    }
  }
</script>


<style lang="less">
  @import './searchResult.less';
</style>
